<template>
  <div class="page device-page">
    <div class="page-title-box card-wrapper">
      <span class="page-title-text">设备管理</span>
      <div class="page-title-options">
        <a-button type="primary" @click="handlePopCreateModal">添加设备</a-button>
      </div>
    </div>
    <div class="page-list-content card-wrapper">
      <a-table :data-source="tableData" :columns="columns" :pagination="false">
        <template #bodyCell="{record, column}">
          <template v-if="column.dataIndex === 'deviceType'">
            <span v-if="record.deviceType === 'dock'">机场</span>
            <span v-else>飞行器</span>
          </template>
          <template v-if="column.dataIndex === 'status'">
            <span v-if="record.status === DeviceStatus.Normal">正常</span>
            <span class="status-text-disabled" v-if="record.status === DeviceStatus.Forbidden">已禁用</span>
            <span class="status-text-delete" v-if="record.status === DeviceStatus.Deleted">已删除</span>
          </template>
          <template v-if="column.dataIndex === 'deviceBrand'">
            <span v-if="record.deviceBrand === 'dj'">大疆</span>
            <span v-if="record.deviceBrand === 'other'">其它</span>
          </template>
          <template v-if="column.dataIndex === 'option'">
            <a-button type="link" @click="handlePopEditModal(record)" v-if="record.status !== DeviceStatus.Deleted">编辑</a-button>
            <a-button type="link" danger v-if="record.status === DeviceStatus.Normal" @click="setDeviceStatus(record, DeviceStatus.Forbidden)">禁用</a-button>
            <a-button type="link" danger v-if="record.status === DeviceStatus.Normal" @click="setDeviceStatus(record, DeviceStatus.Deleted)">删除</a-button>
            <a-button type="link" v-if="record.status === DeviceStatus.Forbidden" @click="setDeviceStatus(record, DeviceStatus.Normal)">启用</a-button>
            <a-button type="link" v-if="record.status === DeviceStatus.Deleted" @click="setDeviceStatus(record, DeviceStatus.Normal)">恢复</a-button>
          </template>
        </template>
      </a-table>
      <a-modal v-model:visible="modalVisible" width="40%" :title="editFlag ? '编辑设备' : '添加设备'" :footer="null">
        <a-form
            ref="formRef"
            :model="formState"
            name="basic"
            :label-col="{ span: 8 }"
            :wrapper-col="{ span: 16 }"
            autocomplete="off"
            @finish="onFinish">
          <a-form-item
              label="设备SN"
              name="deviceSn"
              :rules="[{ required: true, trigger: 'blur', message: '设备SN必填' }]">
            <a-input v-model:value="formState.deviceSn" />
          </a-form-item>
          <a-form-item
              label="设备名称"
              name="deviceName"
              :rules="[{ required: true, trigger: 'blur', message: '设备名称必填' }]">
            <a-input v-model:value="formState.deviceName" />
          </a-form-item>
          <a-form-item
              label="设备类型"
              name="deviceType"
              :rules="[{ required: true, trigger: 'blur', message: '设备类型必填' }]">
            <a-select v-model:value="formState.deviceType" >
              <a-select-option value="dock">机场</a-select-option>
              <a-select-option value="aircraft">飞行器</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
              label="设备型号"
              name="deviceModel">
            <a-select allow-clear v-model:value="formState.deviceModel" >
              <a-select-option :value="type" v-for="type in Device_MODEL" :key="type">{{type}}</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
              label="设备厂商"
              name="deviceBrand">
            <a-select v-model:value="formState.deviceBrand" >
              <a-select-option value="dj">大疆</a-select-option>
              <a-select-option value="other">其它</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
              label="设备所在地址"
              name="deviceAddress"
              :rules="[{ required: true, trigger: 'blur', message: '设备所在地址必填' }]">
            <a-input v-model:value="formState.deviceAddress" />
          </a-form-item>
          <a-form-item
              label="设备所属部门"
              name="deviceDepartment">
            <a-input v-model:value="formState.deviceDepartment" />
          </a-form-item>
          <a-form-item
              label="设备状态"
              name="status">
            <a-select disabled allow-clear v-model:value="formState.status" >
              <a-select-option :value="DeviceStatus.Normal" >正常</a-select-option>
              <a-select-option :value="DeviceStatus.Forbidden" >已禁用</a-select-option>
              <a-select-option :value="DeviceStatus.Deleted" >已删除</a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item :wrapper-col="{ offset: 8, span: 16 }">
            <div class="btn-row">
              <a-button @click="modalVisible = false">取消</a-button>
              <a-button type="primary" html-type="submit">保存</a-button>
            </div>
          </a-form-item>
        </a-form>
      </a-modal>
    </div>
  </div>
</template>

<script setup lang="ts">
import {nextTick, ref} from 'vue'
import {DeviceItem, DeviceStatus, Device_MODEL, ResDto} from "../../types/common";
import deviceApi from '../../api/device/index';
import {message} from "ant-design-vue";

const modalVisible = ref(false)
const editFlag = ref(false)
const formRef = ref()
const formState = ref<DeviceItem>({
  deviceSn: '',
  deviceModel: undefined,
  deviceBrand: 'dj',
  deviceType: undefined,
  deviceName: '',
  deviceAddress: '',
  deviceDepartment: '',
  status: DeviceStatus.Normal,
})
const tableData = ref<DeviceItem[]>([])
const columns = [
  {
    title: '设备名称',
    dataIndex: 'deviceName',
    key: 'deviceName',
  },{
    title: '设备SN',
    dataIndex: 'deviceSn',
    key: 'deviceSn',
  },{
    title: '设备类型',
    dataIndex: 'deviceType',
    key: 'deviceType',
  },{
    title: '设备所在地',
    dataIndex: 'deviceAddress',
    key: 'deviceAddress',
  },{
    title: '设备型号',
    dataIndex: 'deviceModel',
    key: 'deviceModel',
  },{
    title: '设备品牌',
    dataIndex: 'deviceBrand',
    key: 'deviceBrand',
  },{
    title: '设备状态',
    dataIndex: 'status',
    key: 'status',
  },{
    title: '操作',
    dataIndex: 'option',
    key: 'option',
  },

]
const getDeviceList = () => {
  deviceApi.getList().then((res: ResDto) => {
    if (res.data && res.data.length) {
      tableData.value = res.data
    }
  })
}
getDeviceList()

const setDeviceStatus = (record: DeviceItem, status: DeviceStatus) => {
  deviceApi.edit({...record, status}).then((res: ResDto) => {
    if (res.code === 0) {
      message.success('操作成功')
      getDeviceList()
    } else {
      message.error(res.message)
    }
  }).catch((e: any) => {
    console.log(e)
    message.error('服务异常')
  })
}

const handlePopEditModal = (record: DeviceItem) => {
  editFlag.value = true
  formState.value = JSON.parse(JSON.stringify(record))
  modalVisible.value = true
  nextTick(() => {
    formRef.value.clearValidate()
  })
}
const handlePopCreateModal = () => {
  editFlag.value = false
  formState.value = {
    deviceSn: '',
    deviceType: undefined,
    deviceModel: undefined,
    deviceBrand: 'dj',
    deviceName: '',
    deviceAddress: '',
    deviceDepartment: '',
    status: DeviceStatus.Normal,
  }
  modalVisible.value = true
  nextTick(() => {
    formRef.value.clearValidate()
  })
}
const onFinish = () => {
  let p
  if (editFlag.value) {
    p = deviceApi.edit(formState.value)
  } else {
    p = deviceApi.add(formState.value)
  }
  p.then((res) => {
    if (res.code === 0) {
      message.success('保存成功')
      modalVisible.value = false
      getDeviceList()
    } else {
      message.error(res.message)
    }
  }).catch((e: any) => {
    message.error('服务异常')
  })
}
</script>

<style scoped>

</style>
